<template>
  <div>
    <h1>第一个组合式API的案例</h1>

    <p>count: {{ count }}</p>

    <button @click="fn1">increment</button>

    <button @click="fn2">decrement</button>
  </div>
</template>

<script>
/**
 * 组合式API的入口是  setup
 *
 * PS:
 *  1. 无法在 setup 函数顶层使用 this - 组件实例对象
 */
// import { ref } from 'vue'

// 引入抽离出去的函数
import useCount from './hooks/useCount'

export default {
  setup() {
    // 使用抽离出去的函数
    const { count, fn1, fn2 } = useCount()

    // return 给我当前组件使用
    return {
      count,
      fn1,
      fn2
    }
  },

  // setup() {
  //   // 返回一个对象，对象的 key 就是模板中能够使用的数据或方法

  //   console.log(this, '顶层')

  //   // 定义的 count 是一个普通的数据，没有响应式，对它的修改没法引起组件的render
  //   // let count = 10
  //   // 改为使用 ref() 响应式API 创建响应式数据 count
  //   //    通过 ref() 创建的响应式数据 count 不是一个 10 而是一个对象（RefImpl - Ref引用类型），该对象中的 value 属性才是原始值 10
  //   let count = ref(10)
  //   console.log('count', count)

  //   const fn1 = () => {
  //     console.log('fn1', this)
  //     // 如果让模板中的 count++
  //     // 获取 count 的值
  //     console.log('count', count)
  //     count.value++
  //     console.log('count', count)
  //   }

  //   const fn2 = () => {
  //     console.log('fn2')
  //     // PS: count 是一个 ref() 创建的响应式数据，它是一个对象，在JS部分需要 .value 去获取它的值和修改它的值。
  //     //     而在模板template中使用该 count 时，无需 .value
  //     count.value--
  //   }

  //   return {
  //     count,
  //     fn1,
  //     fn2,
  //   }
  // },
}
</script>
